<template>
    <!-- 视图部分 -->
    <div>
        <van-nav-bar title="影院">
        <template #right>
            <van-icon name="search" size="18" color='#000'/>
        </template>
        <template #left>
            <div @click='toCity()'>深圳 <span class="iconfont icon-xiajiantou1"></span></div>   
        </template>
        </van-nav-bar>
        <van-list v-model='loading' :finished='finished' finished-text='已经到底了' @load="onLoad">
        <van-card v-for='item in list' :key="item.filmId">
            <template #desc>
                <div class="desc">
                    <div>
                        主演：{{ item.address}}
                    </div>
                </div>
            </template>
            <template #title>
                    <div class="title">{{item.name}}</div>
            </template>
            <template>
                    <div class="price">{{item.lowprice}}起</div>
            </template>
            <template #tags>
                <van-tag plain class="orderTicket" size="large" type="danger">购票</van-tag>
            </template>
        </van-card>
        </van-list>
    </div>
</template>

<script>
// 逻辑部分
import uri from '@/config/uri'
import Vue from 'vue';
import { NavBar } from 'vant';
import { Card, Tag, List } from "vant";
Vue.use(Card);
Vue.use(Tag);
Vue.use(List);
Vue.use(NavBar);
export default {
    data(){
        return {
        //    pageNum:1,
            // pageSize:10,
            list:[],
            loading:false,
            finished:false,
        }
    },
    methods:{
        toCity(){
            this.$router.push("/city");
        },
        onLoad(){
            this.$http.get(uri.getCinemaInfo).then((ret)=>{
                //获取最大页码
                
                this.list=ret;
                //本次请求已经完成
                this.loading=false;
                // if(this.pageNum<maxPageNum){
                //     this.pageNum++;
                // }else{
                //     //说明已经全部加载完毕
                //     this.finished=true;
                // }
                this.finished=true;
            })
        },
    },
    mounted(){
        // localStorage.setItem('cityName',this.cityName);
    }
}
</script>

<style scoped>
/* 样式部分 */
.title {
    font-size: 16px;
    margin-top:20px;
}
/* 描述样式 */
.desc {
    font-size: 13px;
    color: #797d82;
}
</style>